<template>
  <view>
    <u-navbar title="上传纸质报告" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222"></u-navbar>
    <view class="" style="width: 100%; height: 20rpx; background: #f8f8f8"></view>
    <!-- 纸质 -->
    <view class="" style="margin-top: 20rpx; background: #fff">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; height: 99rpx; border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx; padding-left: 29rpx">患者信息</view>
        <view class="" style="display: flex; align-items: center; padding-right: 40rpx; font-size: 26rpx; color: #999999">
          {{ name }}
        </view>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; height: 99rpx; border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx; padding-left: 29rpx">报告名称</view>
        <view class="" style="display: flex; align-items: center; padding-right: 35rpx">
          <input type="text" placeholder="请输入报告名称" style="font-size: 26rpx; color: #999999; width: 200rpx; text-align: right" v-model="report_name" />
        </view>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; height: 99rpx; border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx; padding-left: 29rpx">检查时间</view>
        <view class="" style="display: flex; align-items: center; padding-right: 40rpx; font-size: 26rpx; color: #999999" @tap="show = true">
          <!-- <input type="text" placeholder="" style="width: 200rpx;"> -->
          {{ time }}
        </view>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; height: 99rpx; border-bottom: 1rpx solid #e7e7e7">
        <view class="" style="font-size: 28rpx; padding-left: 29rpx">检查机构</view>
        <view class="" style="display: flex; align-items: center; padding-right: 35rpx">
          <input type="text" placeholder="请选输入检查机构" style="font-size: 26rpx; color: #999999; width: 230rpx; text-align: right" v-model="report_unit" />
        </view>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; height: 99rpx; border-bottom: 1rpx solid #e7e7e7" @tap="show1 = true">
        <view class="" style="font-size: 28rpx; padding-left: 29rpx">报告类型</view>
        <view class="" style="display: flex; align-items: center; padding-right: 35rpx">
          <view class="" style="font-size: 28rpx; color: #999999">
            {{ type }}
          </view>
          <view class="" style="padding-left: 15rpx">
            <u-icon name="arrow-down" color="#999999" size="28"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="" style="width: 100%; height: 20rpx; background: #f8f8f8"></view>
    <view class="" style="font-size: 30rpx; padding: 30rpx">上传纸质报告</view>
    <view class="" style="display: flex; align-items: center; padding: 0 28rpx">
      <view class="">
        <u-upload :action="action" :file-list="fileList" @on-uploaded="onUploaded" max-count="8" :form-data="formData"></u-upload>
      </view>
      <view class="" style="font-size: 24rpx; padding-left: 25rpx" v-if="imgbox == ''">上传相关图片（最多上传8张图片）</view>
    </view>
    <view class="btn" @tap="save">保存</view>
    <u-picker mode="time" v-model="show" :params="params" @confirm="confirm"></u-picker>
    <u-picker mode="selector" v-model="show1" :default-selector="[0]" :range="selectorObj" range-key="name" @confirm="confirm1"></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        background: '#FFFFFF'
      },
      action: 'https://wenzhen.fuerle168.com//api/common/upload',
      fileList: [],
      formData: {
        token: uni.getStorageSync('user_info').token
      },

      imgbox: [],
      name: '',
      params: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false
      },
      show: false,
      time: '请选择检查时间',
      show1: false,
      selectorObj: [
        { name: '检查报告', id: 2 },
        { name: '检验报告', id: 1 }
      ],
      type: '请选择报告类型',
      report_unit: null,
      report_name: null
    };
  },
  methods: {
    confirm(e) {
      console.log(e);
      this.time = e.year + '-' + e.month + '-' + e.day;
    },
    confirm1(e) {
      console.log(e);
      let num = e[0];
      this.type = this.selectorObj[num].name;
    },
    onUploaded(res) {
      let imgs = [];
      res.map((i) => {
        imgs.push(i.response.data.url);
      });
      this.imgbox = [...new Set(imgs)];
      console.log(this.imgbox);
    },
    save() {
      if (!this.report_name) {
        uni.showToast({
          title: '请输入报告名称',
          icon: 'none'
        });
      } else if (this.time == '请选择检查时间') {
        uni.showToast({
          title: '请选择检查时间',
          icon: 'none'
        });
      } else if (!this.report_unit) {
        uni.showToast({
          title: '请输入检查机构',
          icon: 'none'
        });
      } else if (this.type == '请选择报告类型') {
        uni.showToast({
          title: '请选择报告类型',
          icon: 'none'
        });
      } else if (this.imgbox == '') {
        uni.showToast({
          title: '请上传相关图片',
          icon: 'none'
        });
      } else {
        this.api({
          url: '/api/healthy/uploadReport',
          method: 'post',
          data: {
            report_name: this.report_name,
            report_type: this.type == '检查报告' ? 2 : 1,
            report_unit: this.report_unit,
            report_time: this.time,
            report_images: this.imgbox
          }
        }).then((res) => {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        });
      }
    }
  },
  onLoad(op) {
    this.name = op.name;
  }
};
</script>

<style>
.btn {
  margin: 99rpx 115rpx;
  height: 80rpx;
  background: linear-gradient(180deg, #1a9eff, #0fb8ff);
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  color: #ffffff;
  font-size: 32rpx;
}
</style>
